[title sub="Written by Steve Jarvis, Sponsored by Arvixe hosting"]Composr Supplementary: Adding an Image Slider to Composr[/title]

[media width="150" description="slider" float="right"]data_custom/images/docs/sup_adding_an_image_slider_to_composr/a2c951921f40c37a7451e94648bda624.png[/media]
Many websites now make use of sliders to convey information to their visitors. It's incredibly common especially in the world of ecommerce as it allows several items to be displayed in the same space while sliding between them. To achieve this in Composr it is just a case of needing to install a specific add-on. The add-on is titled Unslider and is simple to set up and use which I will go into below.

[title="2"]Installing the Unslider add-on in Composr[/title]

To install this add-on

[list]
[*]Log in to your adminzone[/*]
[*]Navigate to the structure and then addons section of the Adminzone[/*]
[*]Scroll down and click 'import non bundled addons'[/*]
[*]On the next screen select the 'download' check box and expand the Graphical addons section of the tree[/*]
[*]Select 'Unslider' and click the 'Import Non-Bundled addons' button[/*]
[*]The next screen will show you which files will be updated as the add-on is installed. It is important you check this list carefully if you have changed any templates on your site or any of the other coding. There should only be around 5 or 6 files for this add-on[/*]
[*]Once you are happy click 'proceed' which is found in the bottom right[/*]
[/list]
[title="2"]Adding the slider to your page[/title]

[media width="150" description="unslider" float="right"]data_custom/images/docs/sup_adding_an_image_slider_to_composr/d3dddd4a5dd67f7099d60146b5cb9b5f.png[/media]
If you are using the block creation wizard you can add a comcode block in the normal way and you will need to scroll down until you see the block called animated_Unslider. If you are adding the code manually you can use this example and tailor it to your needs.

[code="Comcode"]
[block pages="slide1,slide2,slide3,slide4,slide5,slide6" width="100%" height="350px" buttons="1" delay="3000" speed="500" keypresses="0"]main_unslider[/block]
[/code]

[list]
[*]Pages – This is the names of the slides which you will use in your slider. I will cover how to edit these further down.[/*]
[*]Width – The width of the slider. This defaults to 100% of the available space[/*]
[*]Height – this defaults to blank[/*]
[*]Buttons – whether you want buttons for users to control the slider to be visible[/*]
[*]Delay – how long will the slider delay before moving on[/*]
[*]Speed – how fast will the transition happen[/*]
[*]Keypresses – can the slider be controlled by keypresses rather than clicking[/*]
[*]Slider ID – the name of this slider if you have multiple sliders on the same page you will have to make sure you give them different names.[/*]
[*]Bg Colour – The background colour of the slider.[/*]
[/list]

[title="2"]Editing the slides[/title]

To edit the comcode page which make up the slides for the slider you need to edit the individual comcode pages which have been created. To find these go to the content section of the adminzone. Choose Pages and look for pages titled  _unslider_slide1 if you have called your slides something other than slide1, slide 2, etc. you will need to find the pages with the names set accordingly.

You can now edit these pages as you would a normal page on your website.

[box="Thank you Arvixe"]This tutorial was sponsored by [url="Arvixe hosting"]http://www.arvixe.com[/url].[/box]

{$SET,tutorial_tags,Structure and navigation,Content,novice}{$SET,tutorial_add_date,Sep 2014}{$SET,tutorial_summary,Many websites now make use of sliders to convey information to their visitors. It's incredibly common especially in the world of ecommerce as it allows several items to be displayed …
}[block]main_tutorial_rating[/block]